<template>
  <div class="container">
    <el-card>
      <el-row type="flex" justify="end">
        <el-button type="success" @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </el-row>
      <el-form class="form-basics">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              @change="onChange"
              v-model="searchInfo.subjectID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="searchInfo.catalogID" placeholder="请选择">
              <el-option
                v-for="item in CatalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="searchInfo.tags" placeholder="请选择">
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.tagname"
                :value="item.id"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              v-model="searchInfo.keyword"
              placeholder="请输入内容"
              class="form-ipt"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="searchInfo.questionType" placeholder="请选择">
              <el-option
                v-for="(item, index) in questionTypeList"
                :key="index"
                :label="item"
                :value="index + 1"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="searchInfo.difficulty" placeholder="请选择">
              <el-option
                v-for="(item, index) in difficultyList"
                :key="index"
                :label="item"
                :value="index + 1"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="searchInfo.direction" placeholder="请选择">
              <el-option
                v-for="item in directionList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="searchInfo.creatorID" placeholder="请选择">
              <el-option
                v-for="item in UsersList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input
              v-model="searchInfo.remarks"
              placeholder="请输入内容"
              class="form-ipt"
            ></el-input
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input
              v-model="searchInfo.shortName"
              placeholder="请输入内容"
              class="form-ipt"
            ></el-input
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              v-model="searchInfo.province"
              placeholder="请选择"
              class="half-select"
              @change="cityChange"
            >
              <el-option
                v-for="item in provincesList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>

            <el-select
              class="half-select"
              v-model="searchInfo.city"
              style="margin-left: 20px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cityList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="form-colBtn">
          <el-button @click="clearContent">清除</el-button>
          <el-button type="primary" @click="searchContent">搜索</el-button>
        </el-col>
      </el-form>
      <!-- 警告框 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 底部表格 -->
      <el-table
        :data="questionList"
        style="width: 100%"
        :header-cell-style="{ background: '#f4f4f5' }"
      >
        <el-table-column prop="number" label="试题编号" width="120px">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120px">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120px">
        </el-table-column>
        <el-table-column label="题型" width="120px">
          <template v-slot="scoped">
            {{ questionTypeList[scoped.row.questionType - 1] }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="300px">
          <template v-slot="scoped">
            <div v-html="scoped.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="200px">
          <template v-slot="scoped">
            {{ scoped.row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="120px">
          <template v-slot="scoped">
            {{ difficultyList[scoped.row.difficulty - 1] }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="scoped">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              circle
              @click="onPreview(scoped.row)"
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              circle
              @click="
                $router.push({
                  name: 'questions-new',
                  params: { id: scoped.row.id }
                })
              "
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteQuestion(scoped.row)"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-check"
              circle
              @click="addQuestion(scoped.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页效果 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="this.query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.counts"
      >
      </el-pagination>
    </el-card>
    <!-- 点击预览弹出层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="60%"
    >
      <QuestionPreview :questionList="questionListScoped"></QuestionPreview>
    </el-dialog>
  </div>
</template>

<script>
import {
  list as QuestionList,
  remove as QuestionRemove,
  choiceAdd
} from '@/api/hmmm/questions.js'
import { list as subjectList } from '@/api/hmmm/subjects.js'
import { list as CatalogList } from '@/api/hmmm/directorys.js'
import { list as TagList } from '@/api/hmmm/tags.js'
import { list as UsersList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionPreview from '../components/questions-preview.vue'
export default {
  data() {
    return {
      query: {
        page: 1,
        pagesize: 2
      },
      searchInfo: {
        subjectID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        catalogID: null
      },

      list: [],
      subjectList: [],
      CatalogList: [],
      tagList: [],
      questionTypeList: ['单选', '多选', '简单'],
      difficultyList: ['简单', '一般', '困难'],
      directionList: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      creatorList: [],
      UsersList: [],
      provincesList: provinces(),
      cityList: [],
      questionList: [],
      previewDialogVisible: false,
      questionListScoped: {},
      counts: 0
    }
  },
  components: {
    QuestionPreview
  },
  created() {
    this.loadSubjectList()
    // console.log(provinces())
    this.loadQuestionList()
  },
  methods: {
    // 清空搜索内容
    clearContent() {
      this.searchInfo = {
        subjectID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        catalogID: null
      }
      this.loadQuestionList()
    },
    // 搜索内容
    async searchContent() {
      this.loadQuestionList(this.searchInfo)
    },
    // 学科列表数据
    async loadSubjectList() {
      const { data } = await subjectList()
      // console.log(data)
      this.subjectList = data.items
      // console.log(this.provincesList)
    },
    // 当学科被选中后触发
    onChange() {
      if (!this.searchInfo.subjectID) {
        return
      }
      // console.log(this.subjectID)
      this.loadCatalogList()
      this.loadTagsList()
      this.loadUserList()
    },
    // 目录列表数据
    async loadCatalogList() {
      const { data } = await CatalogList(this.searchInfo.subjectID)
      this.CatalogList = data.items
      // console.log(this.CatalogList)
    },
    // 标签列表数据
    async loadTagsList() {
      const { data } = await TagList(this.searchInfo.subjectID)
      // console.log(data)
      this.tagList = data.items
    },
    // 用户列表数据
    async loadUserList() {
      const { data } = await UsersList()
      // console.log(data)
      this.UsersList = data.list
    },
    // 城市发生改变时调用的方法
    cityChange() {
      this.cityList = citys(this.province)
    },
    // 获取基础题库的数据
    async loadQuestionList(val) {
      const { data } = await QuestionList({ ...this.query, ...val })
      // console.log(data)
      this.counts = data.counts
      this.questionList = data.items
      // console.log(this.questionList)
    },
    handleSizeChange(newsize) {
      this.query.pagesize = newsize
      this.loadQuestionList(this.searchInfo)
    },
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.loadQuestionList(this.searchInfo)
    },
    // 点击预览效果
    onPreview(row) {
      this.previewDialogVisible = true
      this.questionListScoped = row
      console.log(row)
      this.questionDetail(row)
    },
    // 基础题库详情
    async questionDetail(row) {
      // const { data } = await QuestionDetail(row)
      // console.log(data)
    },
    // 删除功能
    async deleteQuestion(row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') return this.$message.info('删除已取消')
      await QuestionRemove(row)
      this.$message.success('删除成功')
      this.loadQuestionList()
    },
    // 加入精选功能
    async addQuestion(row) {
      const confirmResult = await this.$confirm(
        '是否将该题目加入精选题库？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') return this.$message.info('加入已取消')
      row.choiceState = '1'
      await choiceAdd(row)
      this.$message.success('加入精选题库成功')
      this.$router.push('/questions/choice')
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;

  .addshiti {
    display: flex;
    justify-content: flex-end;
  }
  .form-basics {
    margin-top: 20px;
    /deep/.el-form-item__label {
      font-size: 18px;
      width: 100px;
    }
    /deep/.el-input--suffix {
      width: 256px;
      height: 32px;
      overflow: hidden;
    }
    /deep/.form-ipt {
      width: 256px;
      height: 32px;
      overflow: hidden;
    }
    .form-colBtn {
      padding-right: 2px;
      display: flex;
      justify-content: flex-end;
    }
    /deep/.half-select .el-input--suffix {
      width: 118px;
    }
  }
  .el-table {
    margin-top: 20px;
    /deep/.el-table__header-wrapper {
      background-color: #fafafa !important;
    }
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
